<template>
  <div class="widget_settings_pro">
    <ele-form-section
        v-model="formData"
        :request-fn="handleSubmit"
        :sections="sections"
        @request-success="handleSuccess"
    >
      <template v-slot:show_label="{ desc, data, field, formData }">
        <p class="content">
          以下设置皆为全局设置不仅限于对当前页面生效，改动之后将会影响该主题全部页面的商品列表/商品详情/quickview弹窗的信息展示
        </p>
      </template>
      <template v-slot:show_label1="{ desc, data, field, formData }">
        <p class="content">
          以下商品信息位于商品详情与Quick view弹窗，改动后不仅限于对当前页面生效，将会对全局生效。
        </p>
      </template>
      <template v-slot:show_label2="{ desc, data, field, formData }">
        <p class="content">
          可在购买按钮下方添加文字和图片，来增强网站安全感，展示更多服务信息或产品特性等。
        </p>
      </template>

      <template v-slot:label_style="{ desc, data, field, formData }">
        <el-radio-group v-model="formData.label_style" class="g-product">
          <el-radio label="triangle"><svg-icon icon-class="pro-triangle"></svg-icon></el-radio>
          <el-radio label="flag"><svg-icon icon-class="pro-flag"></svg-icon></el-radio>
          <el-radio label="badge"><svg-icon icon-class="pro-badge"></svg-icon></el-radio>
        </el-radio-group>
      </template>
      <template v-slot:blocks="{ desc, data, field, formData }">
        <el-collapse v-model="activeNames">
          <template v-for="(item, index) in formData.blocks">
            <el-collapse-item title="图片" :name="index" class="game-select editForm" :key="index">
              <div class="form-item">
                <label >PC端图片</label>
                <ele-form-upload-plus-file v-model="item.src" title="PC图片"  />
              </div>
              <div class="form-item">
                <label >移动端图片</label>
                <ele-form-upload-plus-file v-model="item.mobile_src" title="PC图片"  />
              </div>
              <div class="form-item">
                <label >按钮文字</label>
                <el-input type="text" v-model="item.button_label"></el-input>
              </div>
              <div class="form-item">
                <label >按钮链接</label>
                <el-select v-model="item.button_link">
                  <el-option  value=""  label="无"></el-option>
                  <el-option  value="index"  label="首页"></el-option>
                  <el-option  value="collection"  label="系列详情页"></el-option>
                  <el-option  value="products-id"  label="商品详情页"></el-option>
                </el-select>
              </div>
              <div class="form-item">
                <label >按钮背景色</label>
                <el-color-picker
                    v-model="item.button_bg_color"
                    :predefine="predefineColors">
                </el-color-picker>
              </div>
              <div class="form-item">
                <label >按钮文字色</label>
                <el-color-picker
                    v-model="item.button_text_color"
                    :predefine="predefineColors">
                </el-color-picker>
              </div>
              <div class="form-item">
                <label >蒙层不透明度</label>
                <el-slider v-model="item.opacity">
                </el-slider>
              </div>
              <div class="form-item">
                <label >图片截取位置</label>
                <el-select v-model="item.alignment">
                  <el-option  value="top"  label="上"></el-option>
                  <el-option  value="center"  label="中"></el-option>
                  <el-option  value="bottom"  label="下"></el-option>
                </el-select>
              </div>
              <div class="form-item">
                <label >文字&按钮位置</label>
                <el-select v-model="item.text_position">
                  <el-option  value="center_left"  label="中左"></el-option>
                  <el-option  value="center"  label="中"></el-option>
                  <el-option  value="center_right"  label="中右"></el-option>
                </el-select>
              </div>
              <div class="form-item">
                <label >标题&副标题颜色</label>
                <el-color-picker
                    v-model="item.color"
                    :predefine="predefineColors">
                </el-color-picker>
              </div>
              <div class="form-item">
                <label >标题</label>
                <el-input type="text" v-model="item.title"></el-input>
              </div>
              <div class="form-item">
                <label >副标题</label>
                <el-input type="text" v-model="item.sub_title"></el-input>
              </div>
              <div class="form-item">
                <label >两图公用链接</label>
                <el-select v-model="item.url">
                  <el-option  value=""  label="无"></el-option>
                  <el-option  value="index"  label="首页"></el-option>
                  <el-option  value="collection"  label="系列详情页"></el-option>
                  <el-option  value="products-id"  label="商品详情页"></el-option>
                </el-select>
              </div>
              <div class="form-item">
                <el-button v-if="index !== 0" class="addBtn"  @click="handleRemove(index)"><i class="el-icon-remove"></i>删除内容</el-button>
              </div>
            </el-collapse-item>
          </template>
        </el-collapse>
        <el-button type="primary" size="small" class="addBtn" @click="addPic"><i class="el-icon-plus"></i>添加图片</el-button>
      </template>
      <template v-slot:form-btn="{ btns }">
        <div class="rest-btn" @click="reset">
          <svg-icon icon-class="reset-settings"></svg-icon>
          重置配置
        </div>
      </template>
    </ele-form-section>
  </div>
</template>

<script>
import uploadFile from '@/components/Upload/uploadFile';
import {debounce, deepClone} from '@/utils/utils';
const predefineColors = [
    '#ff4500',
    '#ff8c00',
    '#ffd700',
    '#90ee90',
    '#00ced1',
    '#1e90ff',
    '#c71585',
    'rgba(255, 69, 0, 0.68)',
    'rgb(255, 120, 0)',
    'hsv(51, 100, 98)',
    'hsva(120, 40, 94, 0.5)',
    'hsl(181, 100%, 37%)',
    'hsla(209, 100%, 56%, 0.73)'
];
export default {
    name: 'globalProductForm',
    props: {
        value: {
            type: Object,
            default: () => ({})
        }
    },
    watch: {
        value: {
            handler (newVal, oldVal) {
                const val = JSON.parse(newVal.styleJson);
                console.log(val);
                if (!val.is_cart_recommended_products_title) {
                    val.is_cart_recommended_products_title = 'You May Also Like';
                }
                this.formData = val;
            },
            immediate: false,
            deep: true
        },
        formData: {
            handler (newVal, oldVal) {
                this.pageCount++;
                if (this.pageCount !== 1) {
                    this.setData();
                }
            },
            immediate: false,
            deep: true
        }
    },
    data () {
        return {
            pageCount: 1,
            formData: this.value ? JSON.parse(this.value.styleJson) : {},
            activeNames: [],
            uploadPath: process.env.VUE_APP_BASE_API + '/upload-file',
            sections: [
                {
                    title: '商品通用信息',
                    formDesc: {
                        'show_label': {},
                        'is_compare_at_price_show': {
                            type: 'switch',
                            break: true,
                            label: '虚拟价'
                        },
                        'is_discount_show': {
                            type: 'switch',
                            break: true,
                            label: '折扣标签'
                        },
                        // 'vendor_enable': {
                        //     type: 'switch',
                        //     label: '供应商'
                        // },
                        // 'product_save_amount': {
                        //     type: 'switch',
                        //     label: '优惠金额'
                        // },
                        'label_style': {
                            label: '标签样式',
                            type: 'radio',
                            options: [
                                { text: '居右', value: 'right' },
                                { text: '居右', value: 'flag' },
                                { text: '居右', value: false }
                            ]
                        },
                        'label_background_color': {
                            type: 'color',
                            label: '标签背景',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'label_color': {
                            type: 'color',
                            label: '标签文字',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        }
                    }
                },
                {
                    title: '商品详情与quickview信息',
                    formDesc: {
                        'show_label1': {},
                        'is_sku_show': {
                            type: 'switch',
                            break: true,
                            label: 'SKU'
                        },
                        // 'is_stock_show': {
                        //     type: 'switch',
                        //     label: '库存'
                        // },
                        'is_sales_show': {
                            type: 'switch',
                            break: true,
                            label: '销量'
                        },
                        // 'is_brief_show': {
                        //     type: 'switch',
                        //     label: '副标题'
                        // },
                        'is_quantity_box_show': {
                            type: 'switch',
                            break: true,
                            label: '数量选择框'
                        },
                        // 'is_select_default_variants': {
                        //     type: 'switch',
                        //     label: '默认选中款式'
                        // },
                        // 'variant_type': {
                        //     type: 'select',
                        //     label: '款式选择形式',
                        //     options: [
                        //         {text: '按钮', value: 'button'},
                        //         {text: '列表', value: 'list'}
                        //     ]
                        // },
                        'is_add_to_cart_show': {
                            type: 'switch',
                            break: true,
                            label: '展示 Add To Cart 按钮'
                        },
                        'is_payment_btn_show': {
                            type: 'switch',
                            break: true,
                            label: '展示 Buy Now 按钮'
                        },
                        'add_to_cart_toast_type': {
                            type: 'select',
                            label: '款式选择形式',
                            options: [
                                {text: '添加到购物车，页面不跳转', value: 'modal'},
                                {text: '跳到购物车', value: 'to_cart'},
                                {text: '跳到支付页', value: 'to_checkout'}
                            ]
                        }
                    }
                },
                {
                    title: '商品列表',
                    formDesc: {
                        'is_quick_view_btn_show': {
                            type: 'switch',
                            break: true,
                            label: '是否展示 Add To Cart 按钮'
                        },
                        'quick_view_btn_text': {
                            type: 'input',
                            label: 'Add To Cart 按钮文案'
                        },
                        'add_to_cart_process': {
                            type: 'select',
                            label: '点击按钮流程',
                            options: [
                                {text: '打开快速购买窗口', value: 'to_quick_view'},
                                {text: '添加到购物车，页面不跳转', value: 'to_toast'},
                                {text: '跳到购物车', value: 'to_cart'},
                                {text: '跳到支付页', value: 'to_product_detail'}
                            ]
                        },
                        'product_grid_image_size': {
                            type: 'select',
                            label: '商品列表图片尺寸',
                            options: [
                                {text: '原始比例', value: 'natural'},
                                {text: '大', value: '150%'},
                                {text: '中', value: '121%'},
                                {text: '小', value: '100%'}
                            ]
                        },
                        'per_row': {
                            type: 'slider',
                            label: () => { return `PC每排商品数 ${this.formData.per_row}`; },
                            attrs: {
                                min: 1,
                                max: 4
                            }
                        },
                        // 移动端是否开启单排单商品
                        'mobile_single_row': {
                            type: 'switch',
                            label: '移动端是否开启单排单商品',
                            break: true
                        },
                        'no_padding': {
                            type: 'switch',
                            break: true,
                            label: '紧凑模式'
                        },
                        'is_cart_recommended_products_show': {
                            type: 'switch',
                            break: true,
                            label: '购物车推荐商品'
                        },
                        'is_cart_recommended_products_title': {
                            type: 'input',
                            label: '购物车推荐商品标题'
                        },
                        'cart_recommended_products_number': {
                            type: 'slider',
                            label: () => { return `推荐数量  ${this.formData.cart_recommended_products_number}`; },
                            attrs: {
                                min: 2,
                                max: 20,
                                step: 2
                            }
                        }
                    }
                },
                {
                    title: '加购信息补充区域',
                    formDesc: {
                        'show_label2': {},
                        'additional_text': {
                            type: 'ele-form-quill-edit',
                            label: '正文'
                        },
                        'additional_image_pc': {
                            label: 'PC端图片',
                            type: 'ele-form-upload-plus-file',
                            attrs: {
                                title: 'PC端图片',
                                desc: '建议尺寸（宽*高）：570*110px'
                            }
                        },
                        'additional_image_mobile': {
                            label: '移动端端图片',
                            type: 'ele-form-upload-plus-file',
                            attrs: {
                                title: '移动端端图片',
                                desc: '建议尺寸（宽*高）：720*220px'
                            }
                        }

                    }
                }
            ],
            predefineColors: [
                '#ff4500',
                '#ff8c00',
                '#ffd700',
                '#90ee90',
                '#00ced1',
                '#1e90ff',
                '#c71585',
                'rgba(255, 69, 0, 0.68)',
                'rgb(255, 120, 0)',
                'hsv(51, 100, 98)',
                'hsva(120, 40, 94, 0.5)',
                'hsl(181, 100%, 37%)',
                'hsla(209, 100%, 56%, 0.73)'
            ]
        };
    },
    methods: {
        addPic () {
            this.formData.blocks.push({
                button_link: '',
                alignment: 'top',
                button_bg_color: '#FFFFFF',
                button_label: 'Learn More11',
                button_text_color: '#000000',
                mobile_src: '',
                opacity: 25,
                src: '',
                sub_title: 'Tell your brand\'s story through  images',
                text_color: '#FFFFFF',
                text_position: 'center_left',
                title: 'Image Slide',
                url: ''
            });
        },
        handleResponse (response, file, fileList) {
            return response;
        },
        handleSubmit (data) {
            return Promise.resolve();
        },
        handleSuccess () {
            this.$message.success('创建成功');
        },
        reset () {
            this.pageCount = 0;
            this.$emit('resetData', this.value);
        },
        setData: debounce(function () {
            let data = deepClone(this.value);
            data.styleJson = JSON.stringify(this.formData);
            this.$store.commit('SET_PROJECT_DATA', data);
        }, 600)
    },
    mounted () {
        if (!('is_cart_recommended_products_title' in this.formData)) {
            this.$set(this.formData, 'is_cart_recommended_products_title', 'You May Also Like');
        }
        if (!(('per_row') in this.formData)) {
            this.$set(this.formData, 'per_row', 4);
        }
        if (!(('mobile_single_row') in this.formData)) {
            this.$set(this.formData, 'mobile_single_row', false);
        }
        if (!(('no_padding') in this.formData)) {
            this.$set(this.formData, 'no_padding', false);
        }
    }
};
</script>

<style scoped lang="scss">
.form-item-inline{
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 10px;
  color: #606266;
  height: 32px;
  margin-bottom: 10px;
}
.editForm{
  margin-bottom: 10px;
  .form-item{
    margin-top: 10px;
    label {
      display: block;
      height: 32px;
      line-height: 32px;
    }
  }
  ::v-deep .el-collapse-item__content{
    border: 1px solid #d8deec;
    border-top:0;
    padding-left: 10px;
  }
}
.addBtn{
  width: 100%;
}
.content {
  color: #666666;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  text-transform: initial;
  word-wrap: break-word;
  word-break: break-word;
  margin-top: 10px;
  margin-bottom: 10px;
  display: block;
  clear: both;
}
</style>

<style lang="scss">
.g-product{
  display: flex;
  align-items: center;
  .el-radio{
    display: flex;
    flex-direction: column;
    justify-content: center;
    .el-radio__label > svg{
      font-size: 60px;
    }
  }
}
</style>
